<template>
  <div>
    <hm-dialog>
      <template #title>
        <h1>友情提示</h1>
      </template>

      <template #content>
        <p>请输入正确的手机号码</p>
      </template>

      <template #footer>
        <button>关闭</button>
      </template>
    </hm-dialog>
    <hr />

    <hm-dialog>
      <!-- 🔔 同样在组件标签， 夹着的内容区域 -->
      <!--  2. 使用template标签，设置#自定义名称，分发不同的内容-->-->
      <template #title>
        <h1>警告</h1>
      </template>

      <template #content>
        <p>您确认要退出吗</p>
      </template>

      <template #footer>
        <button>确定</button>
        <button>取消</button>
      </template>
    </hm-dialog>
  </div>
</template>

<script>
import HmDialog from "./components/HmDialog.vue";
export default {
  components: {
    HmDialog,
  },
};
</script>

<style></style>
